<template>
  <div class="main">
    <div class="back iconfont hover-hand" @click="hiddenShowPlayingDetail">
      &#xe747;
    </div>
    <div class="content">
      <div class="lyrics">
        <div class="left">
          <!-- 留声机针头 -->
          <div class="play-record-start">
            <img src="~assets/img/play-bar-support.jpg" alt="" />
          </div>

          <!-- 留声机针 -->
          <div
            class="play-record-main"
            :style="
              playing
                ? 'transform: rotate(-13deg)'
                : 'transform: rotate(-50deg)'
            "
          >
            <img src="~assets/img/play-bar.jpg" alt="" />
          </div>

          <!-- 留声机主体 -->
          <div class="play-record play">
            <div class="cover">
              <img :src="picUrl" alt="" />
            </div>
          </div>
        </div>

        <!-- 歌词部分 -->
        <div class="right">
          <div class="title yahei">{{ musicName }}</div>
          <div class="author yahei">
            {{ author }}
          </div>
          <div class="lyrics-main yahei" ref="ul">
            <ul>
              <li
                v-for="(item, index) in lyrics"
                :key="index"
                :class="currentLyric === index ? 'active' : ''"
                :ref="currentLyric === index ? 'li' : ''"
              >
                {{ item[1] }}
              </li>
            </ul>
          </div>
        </div>
      </div>

      <!-- 评论部分 -->
      <div class="comments">
        <div class="input">
          <textarea name=""></textarea>
          <p class="yahei">
            <span class="hover-hand">评论</span>
          </p>
        </div>

        <div class="yahei title">
          热门评论
        </div>

        <div class="show-comment">
          <ul>
            <li v-for="item in comments" :key="item.commentId">
              <span class="left">
                <img :src="item.user.avatarUrl" alt="" />
              </span>
              <div class="right">
                <div class="comment-info yahei">
                  <span class="hover-hand">{{ item.user.nickname }}：</span>
                  {{ item.content }}
                </div>
                <div class="comment-time yahei">
                  {{ showCommentCreateTime(item.time) }}
                </div>
                <div class="liked yahei">
                  <i class="iconfont">&#xe611;</i>
                  <span>{{ item.likedCount }}</span>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getSongDetail, getSongComment } from "network/recommend.js";
import { getLyrics } from "network/player.js";
import bus from "utils/bus.js";
import { handleAuthor } from "utils/author.js";
import dayjs from "dayjs";

export default {
  name: "PalyingSongDetail",
  data() {
    return {
      musicName: "",
      author: [],
      picUrl: "",
      lyrics: [],
      playing: false,
      playTime: "",
      currentLyric: 0,
      comments: [],
    };
  },
  methods: {
    hiddenShowPlayingDetail() {
      bus.$emit("showPlayingDetail");
    },
    handleAuthor,
    handleTime(time) {
      let [m, s, ms] = time.replace(".", ":").split(":");
      return m * 60000 + s * 1000 + ms * 1;
    },

    showCommentCreateTime(time) {
      return dayjs(time).format("YYYY年MM月DD日 HH:mm:ss");
    },
  },
  created() {
    bus.$on("isPlaying", (id) => {
      this.playing = true;

      this.currentLyric = 0;

      getSongDetail(id).then((res) => {
        // console.log(res.data.songs[0]);
        this.musicName = res.data.songs[0].name;
        this.author = handleAuthor(res.data.songs[0].ar);
        this.picUrl = res.data.songs[0].al.picUrl;
      });

      //获取并处理歌词数据
      getLyrics(id).then((res) => {
        // console.log(res.data);
        if (res.data.nolyric) {
          // console.log("没有歌词");
          this.lyrics = [];
        } else if (!res.data.uncollected) {
          // console.log("有歌词", "----------", res.data);
          this.lyrics = [];
          res.data.lrc.lyric.split("[").forEach((item) => {
            this.lyrics.push(item.split("]"));
          });
        }
      });

      //created里dom元素还没挂载
      //应该不是dom没挂载的原因，这个需求在currentLyric的watch里面做了
      // this.$refs.ul.scrollTo({
      //   top: 0,
      //   behavior: "smooth",
      // });
      // console.log(this.$refs.ul.scrollHeight);

      //获取评论数据
      getSongComment(id, 0).then((res) => {
        this.comments = res.data.hotComments;
      });
    });

    bus.$on("pauseAndPlay", () => (this.playing = !this.playing));

    bus.$on("timeMove", (newT) => {
      this.playTime = newT;
    });

    bus.$on("playProgressBarClick", (curTime) => {
      // console.log(curTime);
      let result = this.lyrics.find((item) => {
        return typeof (item === String) && this.handleTime(item[0]) > curTime;
      });
      // console.log(result);
      if (result != undefined) {
        let index = this.lyrics.findIndex((item) => {
          return this.handleTime(item[0]) > this.handleTime(result[0]);
        });
        // console.log(index);
        if (index != -1) {
          this.currentLyric = index - 2;
        }

        // console.log(this.currentLyric);
      } else {
        this.currentLyric = this.lyrics.length - 1;
      }
    });

    // bus.$on('preAndNext',(id)=>{

    // })
  },
  watch: {
    playTime(newT) {
      // console.log(this.lyrics.length > 0);
      if (this.lyrics.length > 0) {
        if (
          this.lyrics[this.currentLyric] != undefined &&
          this.lyrics[this.currentLyric].length < 1
        ) {
          this.currentLyric++;
        } else if (this.lyrics[this.currentLyric + 1] != undefined) {
          newT > this.handleTime(this.lyrics[this.currentLyric + 1][0])
            ? this.currentLyric++
            : (this.currentLyric = this.currentLyric);
        }
      }
    },

    currentLyric(newN) {
      if (newN < 3) {
        this.$refs.ul.scrollTo({
          top: 0,
          behavior: "smooth",
        });
      }

      if (
        //有歌词且歌词数量足以滚动
        this.lyrics.length > 10 &&
        this.$refs.li[0].offsetTop > this.$refs.ul.clientHeight / 2
      ) {
        this.$refs.ul.scrollTo({
          top: this.$refs.li[0].offsetTop - this.$refs.ul.clientHeight / 2,
          behavior: "smooth",
        });
      }

      if (newN === this.lyrics.length - 1) {
        this.$refs.ul.scrollTo({
          top: this.$refs.ul.scrollHeight,
          behavior: "smooth",
        });
      }

      if (this.lyrics[newN] != undefined) {
        // console.log(this.lyrics[newN]);
        bus.$emit("lrcIsAct", this.lyrics[newN][1]);
      }

      // this.$refs.ul.scrollTo({
      //   top: this.currentLyric * 10,
      //   behavior: "smooth",
      // });
      // console.log(
      //   this.$refs.ul.scrollTop,
      //   "---",
      //   this.$refs.ul.clientHeight,
      //   "----",
      //   this.$refs.li[0].offsetTop
      // );
    },
  },
};
</script>

<style scoped lang="less">
.back {
  position: fixed;
  width: 0.333333rem;
  height: 0.333333rem;
  right: 1.766667rem;
  top: 0.716667rem;
  font-size: 0.208333rem;
  line-height: 0.333333rem;
  text-align: center;
  background-color: lightseagreen;
  color: white;
}

.main {
  position: fixed;
  bottom: 0.541667rem;
  top: 0.583333rem;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: #fff;
  overflow-y: auto;
  .content {
    margin: 0 auto;
    width: 8.333333rem;
    .lyrics {
      display: flex;
      width: 100%;
      height: 3.583333rem;
      background: radial-gradient(closest-side, #928e8d, #fff);
      .left {
        position: relative;
        height: 100%;
        width: 4.958333rem;
        .play-record-start {
          position: relative;
          z-index: 2;
          top: 0;
          margin: 0 auto;
          width: 0.225rem;
          height: 0.225rem;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .play-record-main {
          position: absolute;
          z-index: 1;
          left: 2.433333rem;
          top: 0.125rem;
          width: 0.716667rem;
          height: 1.083333rem;
          transform-origin: 0 0;
          // transform: rotate(-50deg);
          transition: transform 0.3s;
          transition-property: transform;
          transition-duration: 0.3s;
          transition-timing-function: ease;
          img {
            width: 100%;
            height: 100%;
          }
        }
        .play-record {
          position: absolute;
          left: 1.525rem;
          top: 0.491667rem;
          width: 2.083333rem;
          height: 2.083333rem;
          border: 0.333333rem solid #0e0e11;
          box-shadow: 0 0 0.71429rem #918a85;
          border-radius: 50%;
          overflow: hidden;
          .cover {
            width: 100%;
            height: 100%;
            overflow: hidden;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
      .right {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding: 0 0.083333rem;
        .title {
          font-size: 0.216667rem;
          text-align: center;
          padding-bottom: 0.041667rem;
        }
        .author {
          font-size: 0.133333rem;
          text-align: center;
          padding-bottom: 0.041667rem;
        }
        .lyrics-main {
          flex: 1;
          margin-bottom: 0.083333rem;
          overflow-y: auto;
          // transition: scrollTop 0.3s;
          // transition-property: scrollTop;
          // transition-duration: 0.3s;
          // transition-timing-function: ease;
          ul {
            li {
              font-size: 0.125rem;
              padding-bottom: 0.058333rem;
            }
          }
        }
      }
    }
    .comments {
      .input {
        margin-top: 0.166667rem;
        padding: 0.083333rem;
        background-color: #f0f0f2;
        textarea {
          width: 100%;
          height: 0.541667rem;
          outline: none;
        }
        p {
          text-align: right;
          span {
            font-size: 14px;
          }
        }
      }
      .title {
        width: 100%;
        height: 0.166667rem;
        padding: 0.166667rem 0 0.083333rem 0;
        font-size: 15px;
      }
      .show-comment {
        width: 100%;
        ul {
          > :nth-child(2n) {
            background-color: #f9f9f9;
          }
          li {
            display: flex;
            padding: 0.083333rem 0.166667rem;
            width: 100%;
            align-items: center;
            // height: 0.416667rem;
            .left {
              margin-top: 0.05rem;
              display: inline-block;
              width: 0.358333rem;
              height: 0.358333rem;
              border-radius: 50%;
              overflow: hidden;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .right {
              flex: 1;
              position: relative;
              margin-top: 0.033333rem;
              margin-left: 0.166667rem;
              height: 100%;
              .comment-info {
                font-size: 16px;
                span {
                  color: lightseagreen;
                }
              }
              .comment-time {
                margin: 7px 0 0 10px;
                font-size: 14px;
              }
              .liked {
                position: absolute;
                right: 0.05rem;
                bottom: -0.008333rem;
                span {
                  padding-left: 0.066667rem;
                }
                i {
                  color: lightseagreen;
                }
              }
            }
          }
        }
      }
    }
  }
}

.active {
  color: lightseagreen;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}

.play {
  animation: rotate 20s linear infinite;
}
</style>
